<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue资源 -->
		<script src="../../js/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../css/index.css">
		<!-- 引入组件库 -->
		<script src="../../js/index.js"></script>
		<!-- 引入网络请求库 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
		<script src="../../js/axios.min.js"></script>
		<!-- 对js对象进行序列化处理的工具 -->
		<script src="../../js/qs.min.js"></script>
		<style>
			.avatar-uploader .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.avatar-uploader .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
		 	    width: 178px;
				height: 178px;
				line-height: 178px;
				text-align: center;
			}

			.avatar {
				width: 178px;
				height: 178px;
				display: block;
			}
			.el-upload--picture-card {
				width: 178px;
				height: 178px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 顶部搜索区域 -->
			<el-form :inline="true" :model="findUser" class="demo-form-inline">
				<el-form-item label="用户名">
					<el-input v-model="findUser.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item label="用户住址">
					<el-input v-model="findUser.useraddress" placeholder="住址"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getUserInfoes()">查询</el-button>
					<el-button type="success" @click="addUserInfo()">新增</el-button>
					<el-button type="info" @click="clearUserInfo()">清空</el-button>
				</el-form-item>
			</el-form>
			<!-- 搜索区域结束 -->
			<!-- 列表信息展示区域 -->
			<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column type="index" width="50">
				</el-table-column>

				<el-table-column prop="username" label="用户名" width="120">
				</el-table-column>
				<el-table-column prop="usertel" label="联系方式" width="120">
				</el-table-column>
				<el-table-column prop="useraddress" label="地址" show-overflow-tooltip>
				</el-table-column>
				
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-image
						    style="width: 100px; height: 100px"
						    :src="scope.row.imgsrc" >				
						</el-image>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="updateUserInfo(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="deleteUserInfo(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 展示区域结束 -->
			<!-- 分页组件开始 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="pageNum" :page-sizes="[2, 3, 5, 10]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
			<!-- 分页组件结束 -->
			<!-- 新增功能需要的模态框 -->
			<el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="70%">
				<el-form :model="editUserInfoBean">
					<el-form-item label="用户名" :label-width="formLabelWidth">
						<el-input v-model="editUserInfoBean.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" :label-width="formLabelWidth">
						<el-input v-model="editUserInfoBean.userpwd" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="用户住址" :label-width="formLabelWidth">
						<el-input v-model="editUserInfoBean.useraddress" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系方式" :label-width="formLabelWidth">
						<el-input v-model="editUserInfoBean.usertel" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="头像上传" :label-width="formLabelWidth">
						<el-upload class="avatar-uploader" action="#" list-type="picture-card" :limit="2"
							:auto-upload="true" :http-request="imageChange" :before-upload="beforeAvatarUpload">
							<img v-if="editUserInfoBean.imgsrc" :src="editUserInfoBean.imgsrc" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="editUserInfo()">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 新增功能模态框结束 -->
		</div>

	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				findUser: {
					username: "",
					useraddress: ""
				},
				// 列表数据对象
				tableData: [],
				// 控制dialog框显示、隐藏
				dialogFormVisible: false,
				// 保存新增用户信息的数据对象
				editUserInfoBean: {
					id: null,
					username: "",
					userpwd: "",
					useraddress: "",
					usertel: "",
					imgsrc:""
				},
				formLabelWidth: '120px',
				// 分页相关
				// 当前页码
				pageNum: 1,
				// 当页记录数
				pageSize: 5,
				// 总记录
				total: 0,
				imageUrl:""

			},
			methods: {
				// 获取全部用户信息操作
				getUserInfoes: function(currentPage, currentSize) {
					if (currentPage == null) {
						currentPage = this.pageNum
					}
					if (currentSize == null) {
						currentSize = this.pageSize
					}
					// 因为在axios请求后，this对象指向发生变化
					// 将this对象存储起来，方便后面进行调用
					var that = this
					// 进行参数序列化处理
					var params = Qs.stringify(this.findUser)
					params += "&pageNum=" + currentPage + "&pageSize=" + currentSize
					console.log(params)
					// 使用axios发起post请求
					axios.post('http://localhost:8086/getUserInfoes', params)
						.then(function(response) {
							console.log(response)
							that.tableData = response.data.list
							that.findUser = {}
							// 对分页的信息对象进行重新赋值
							that.total = response.data.total
							that.pageNum = response.data.pageNum
							that.pageSize = response.data.pageSize

						})
						.catch(function(error) {
							console.log(error);
						});

				},
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				// 用户信息新增
				addUserInfo: function() {
					// 在弹框弹出前将数据清空
					this.editUserInfoBean = {
						id: null,
						username: "",
						userpwd: "",
						useraddress: "",
						usertel: "",
						imgsrc:""
					}
					this.dialogFormVisible = true
				},
				// 用户信息保存
				editUserInfo: function() {
					// 因为在axios请求后，this对象指向发生变化
					// 将this对象存储起来，方便后面进行调用
					var that = this
					// 进行参数序列化处理
					var params = Qs.stringify(this.editUserInfoBean)
					// 使用axios发起post请求
					axios.post('http://localhost:8086/editUserInfo', params)
						.then(function(response) {
							console.log(response)
							that.dialogFormVisible = false
							that.getUserInfoes()


						})
						.catch(function(error) {
							console.log(error);
						});
				},
				// 编辑功能弹框处理
				updateUserInfo: function(rowdata) {
					// 弹出模态框
					this.dialogFormVisible = true
					// 将该行数据回显在表单中
					this.editUserInfoBean = rowdata
				},
				// 清空操作处理
				clearUserInfo: function() {
					// 让搜索状态清空
					this.findUser = {}
					//重新获取列表数据
					this.getUserInfoes()
				},
				deleteUserInfo: function(userId) {
					// 因为在axios请求后，this对象指向发生变化
					// 将this对象存储起来，方便后面进行调用
					var that = this
					// 对用户的id属性进行赋值
					this.editUserInfoBean.id = userId
					// 进行参数序列化处理
					var params = Qs.stringify(this.editUserInfoBean)
					// 提示用户删除操作是否执行
					this.$confirm('此操作将永久该条记录, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						// 使用axios发起post请求
						axios.post('http://localhost:8086/deleteUserInfo', params)
							.then(function(response) {
								that.$message({
									type: 'success',
									message: '删除成功!'
								});
								that.getUserInfoes();
							})
							.catch(function(error) {
								console.log(error);
							});

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});

				},
				// 当页面容量发生变化时会触发
				handleSizeChange: function(changeSize) {
					console.log("changeSzie::::" + changeSize)
					this.getUserInfoes(this.pageNum, changeSize)
				},
				// 当页码发生变化时会触发
				handleCurrentChange: function(changeNum) {
					console.log("changeNum:::::" + changeNum)
					this.getUserInfoes(changeNum, this.pageSize)
				},
				// 图片上传时进行调用的函数
				imageChange: function(param) {
					var that=this
					var formData = new FormData()
					formData.append('image', param.file);
					axios.post('http://localhost:8086/upload', formData).then(function(res) {
						console.log(res);
						that.imageUrl=res.data
						that.editUserInfoBean.imgsrc=res.data
						
					});

				},
				// 图片上传前的校验
				beforeAvatarUpload(file) {
					console.log(file.type)
					const isJPG = file.type === 'image/jpeg'||file.type === 'image/png';
					const isLt2M = file.size / 1024 / 1024 < 2;

					if (!isJPG) {
						this.$message.error('上传头像图片只能是 JPG 格式!');
					}
					if (!isLt2M) {
						this.$message.error('上传头像图片大小不能超过 2MB!');
					}
					return isJPG && isLt2M;
				}



			},
			mounted() {
				this.getUserInfoes()
			}
		})
	</script>
</html>
